<template>
	<view class="content">
		<uv-sticky>
			<view class="scroll-x">
				<view class="">
					<scroll-view scroll-x="true" class="scroll_view">
						<view class="scroll-view_X">
							<view class="box" @click="changebreed('全部', '-1')">
								<image src="https://oss.daccf.com/chjii12wgts2zgguh25rd/全部/0e55d5be-c27b-447a-8cec-bc570f5bcfcc.png" mode="" style="width:75px;height:75px;border-radius: 20rpx;"></image>
								<view class="box-name" :class="num == -1 ? 'box-name-active' : ''">全部分类</view>
							</view>
							<view v-for="(item, index) in categorList" :key="index">
								<view class="box" @click="changebreed(item.categoryName, item.id)">
									<image :src="item.icon" mode="" style="width:75px;height:75px;border-radius: 20rpx;"></image>
									<view class="box-name" :class="num == item.id ? 'box-name-active' : ''">{{ item.categoryName }}</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="post" @click="btn()">
						<view class="post-name">全部</view>
						<view class="post-icon"><uv-icon name="list" size="16" color="#999"></uv-icon></view>
					</view>
				</view>
			</view>
			
			<view class="" style="padding:20rpx 30rpx;display: flex;align-items: center;font-size: 26rpx;background-color: #fff;">
				<view class="" style="display: flex;align-items: center;padding-right: 20rpx;border-right: 1rpx solid #f5f5f5;font-weight: 700;color: #ff4544;" @click="changeB">
					<view class="">{{ businessName }}</view>
					<view
						class=""
						style="width: 26rpx;height: 26rpx;background-color: #f5f5f5;display: flex;align-items: center;justify-content: center;border-radius: 13rpx;margin-left: 10rpx;"
					>
						<uv-icon name="arrow-down" size="10" color="#999"></uv-icon>
						<!-- <uv-icon name="arrow-up" size="13" color="#999"></uv-icon> -->
					</view>
				</view>
			</view>
		</uv-sticky>
		<view class="container">
			


			<view class="goodslist">
				<view v-for="(item, index) in goodsList" :key="index" style="margin-bottom: 40rpx;border: 1rpx solid #f5f5f5;border-radius: 20rpx;" >
					<image :src="item.rotationImgsJson[0]" @click="goPath(item.id)" mode="" style="width:325rpx;height:325rpx;border-radius: 20rpx;"></image>
					<view @click="goPath(item.id)"
						class=""
						style="font-size: 26rpx;display: flex;align-items: center;width:325rpx;display: -webkit-box;padding:0 20rpx;box-sizing: border-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;"
					>
						{{ item.goodsName }}
					</view>

					<view class="" style="display: flex;align-items: center;justify-content: space-between;padding: 20rpx;box-sizing: border-box;">
						<view class="" style="color: #ff4544;font-weight: 700;">￥{{ item.goodsPrice }}</view>
						<uv-icon name="shopping-cart" color="#ff4544" size="28" @click="addToCart(item)"></uv-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view>
			<uv-popup ref="popup" mode="top" @change="change" customStyle="padding:20rpx">
				<view class="" style="font-weight: 700;padding: 20rox;font-size: 32rpx;">选择分类</view>
				<scroll-view scroll-y="true" calss="scroll_view" style="height: 600rpx;">
					<view class="scroll-view_Y">
						<view class="box" @click="changebreed('全部', '-1')">
							<image :src="categorList[0].icon" mode="" style="width:75px;height:75px;border-radius: 20rpx;"></image>
							<view class="box-name" :class="num == -1 ? 'box-name-active' : ''">全部</view>
						</view>
						<view v-for="(item, index) in categorList" :key="index">
							<view class="box" @click="changebreed(item.categoryName, item.id)">
								<image :src="item.icon" mode="" style="width:75px;height:75px;border-radius: 20rpx;"></image>
								<view class="box-name" :class="num == item.id ? 'box-name-active' : ''">{{ item.categoryName }}</view>
							</view>
						</view>
						<view class="box" style="opacity: 0;"></view>
						<view class="box" style="opacity: 0;"></view>
						<view class="box" style="opacity: 0;"></view>
						<view class="box" style="opacity: 0;"></view>
					</view>
				</scroll-view>
			</uv-popup>
		</view>

		<view class="">
			<uv-popup ref="popup1" mode="top" customStyle="padding:20rpx">
				<view class="" style="font-weight: 700;padding: 20rox;font-size: 32rpx;">选择门店</view>
				<scroll-view scroll-y="true" calss="scroll_view" style="height: 600rpx;">
					<view class="scroll-view_Y">
						<!-- <view class="box1"  @click="changeshop('全部门店','-1')">
								<view class="box1-name" :class="Bnum == -1 ? 'box1-active' : ''">全部</view>
							</view> -->
						<view v-for="(item, index) in BusinessInfoList" :key="index">
							<view class="box1" @click="changeshop(item.jsonViewData.businessName, item.jsonViewData.businessId)">
								<view class="box1-name" :class="businessId == item.jsonViewData.businessId ? 'box1-active' : ''">{{ item.jsonViewData.businessName }}</view>
							</view>
						</view>
						<view class="box1" style="opacity: 0;"></view>
						<view class="box1" style="opacity: 0;"></view>
						<view class="box1" style="opacity: 0;"></view>
					</view>
				</scroll-view>
			</uv-popup>
		</view>
	</view>
</template>

<script>
import { getBusinessInfoList, getRecommen, getHomeDataInfo, getCategory, insertPlugsShopCart, searchPlugsGoodsByCategoryId,searchPlugsGoodsSpecificationByGoodsId } from '../../utils/api.js';
export default {
	data() {
		return {
			background: 'rgba(255,255,255,0)',
			color: '#fff',
			swiperList: [
				{
					url: 'https://cdn.cnbj1.fds.api.mi-img.com/product-images/mitv6/65oled4ae079/mitv6oled_video.mp4?v1',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}
			],
			categorList: [],
			nowBusinessInfo: {},
			BusinessInfoList: [],
			businessId: -1,
			categoryId: -1,
			num: -1,
			total: 0,
			page: 1,
			categorShow: true,
			goodsList: [],
			businessName: ''
		};
	},
	onPageScroll(res) {
		console.log(res.scrollTop); //距离页面顶部距离
		this.scrollHeight = res.scrollTop;
		if (this.scrollHeight < 99 && this.scrollHeight > 0) {
			this.background = 'rgba(255,255,255,0)';
			this.color = '#fff';
		} else if (this.scrollHeight >= 99 && this.scrollHeight < 199) {
			this.background = 'rgba(255,255,255,0.2)';
			this.color = '#fff';
		} else if (this.scrollHeight >= 199 && this.scrollHeight < 299) {
			this.background = 'rgba(255,255,255,1)';
			this.color = '#000';
		}
	},

	onLoad() {
		
	},
	onShow() {
		this.nowBusinessInfo = uni.getStorageSync('nowBusinessInfo');
		this.businessId = this.nowBusinessInfo.jsonViewData.businessId;
		this.businessName = this.nowBusinessInfo.jsonViewData.businessName;
		
		this.page = 1;
		this.goodsList = [];
		this.getswiperList();
		this.getBusinessInfoList();
		// this.getGoodlist();
	},
	onReachBottom() {
		if (this.goodsList.length < this.total) {
			this.page++;
			this.getGoodlist();
		}
	},
	methods: {
		getswiperList() {
			let data = {
				// businessId: this.nowBusinessInfo.jsonViewData.businessId.toString()
				businessId: -1
			};
			getRecommen(data).then(res => {
				if (res.code == 200) {
					// this.carouselList = res.body
					this.swiperList = res.body.filter(itm => itm.type === 'car');
				}
			});
		},
		getBusinessInfoList() {
			getBusinessInfoList().then(res => {
				if (res.code == 200) {
					this.BusinessInfoList = res.body;
					this.getCategoryList();
				}
			});
		},
		getCategoryList() {
			let data = {
				businessId: this.businessId,
				pid: 0
			};
			getCategory(data).then(res => {
				if (res.code == 200) {
					this.categorList = res.body.list;
					this.getGoodlist();
				}
			});
		},
		getGoodlist() {
			let that = this;
			let data = {
				page: that.page,
				businessId: that.businessId,
				categoryId: that.categoryId
			};
			searchPlugsGoodsByCategoryId(data).then(res => {
				if (res.code == 200) {
					if (this.page == 1) {
						this.goodsList = [];
					}
					res.body.list.forEach((item)=>{
						if(item.rotationImgsJson){
							item.rotationImgsJson=JSON.parse(item.rotationImgsJson)
						}
					})
					let arr = [];
					arr = this.goodsList.concat(res.body.list);
					this.goodsList = arr;
					this.goodsList.forEach(item => {
						if (typeof item.extJson === 'string') {
							item.extJson = JSON.parse(item.extJson);
						}
					});

					this.total = res.body.total;
				}
			});
		},
		btn() {
			this.categorShow = !this.categorShow;
			this.$refs.popup.open();
		},
		changeB() {
			this.$refs.popup1.open();
		},

		change(e) {
			console.log('弹窗状态改变：', e);
		},
		changeshop(name, id) {
			this.businessName = name;
			this.businessId = id;
			this.goodsList = [];
			this.categoryId = -1;
			this.getCategoryList();
			this.$refs.popup1.close();
		},

		changebreed(name, id) {
			console.log(name, id);
			this.breedname = name;
			this.categoryId = id.toString();
			this.num = id;
			this.page = 1;
			this.goodsList = [];
			this.getGoodlist();
			this.$refs.popup.close();
		},

		goPath(id) {
			uni.navigateTo({
				url: `/pages/porduct/porduct?id=${id}`
			});
		},
		goGua() {
			uni.navigateTo({
				url: '/pages/guarantee/guarantee'
			});
		},
		addToCart(item) {
			let token = uni.getStorageSync('userInfo').accessToken;
		
			if (token == null) {
				uni.showModal({
					title: '提示',
					content: '登录才能添加宝贝哦~',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/user/login'
							});
						} else if (res.cancel) {
						}
					}
				});
			} else {
				searchPlugsGoodsSpecificationByGoodsId( {
					goodsId: item.id
				}).then(res => {
					if (res.code == 200) {
						if (res.body.plugsGoodsSpecificationList.length == 0) {
							let postData = {
								businessId: item.businessId.toString(),
								goodsId: item.id,
								goodsCategoryId: item.categoryId,
								goodsNum: 1,
								goodsSpecificationIds: '0'
							};
							insertPlugsShopCart(postData).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '加入成功',
										icon: 'none'
									});
									// this.getCartList();
								}
							});
						} else {
							let postData = {
								businessId: item.businessId.toString(),
								goodsId: item.id,
								goodsCategoryId: item.categoryId,
								goodsNum: 1,
								goodsSpecificationIds: res.body.plugsGoodsSpecificationList[0].id
							};
							insertPlugsShopCart(postData).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '加入成功',
										icon: 'none'
									});
									// this.getCartList();
								}
							});
						}
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	padding: 0;
	box-sizing: border-box;
	background-color: #fff;
}
.uv-collapse {
	display: flex;
}
.scroll-x {
			padding: 20rpx;
			border-bottom: 1rpx solid #eaeaea;
			position: relative;
			background-color: #fff;
			.scroll-view_X {
				display: flex;
				align-items: center;
				.box {
					padding: 20rpx;
					.box-name {
						font-size: 22rpx;
						text-align: center;
						color: #666;
					}
					.box-name-active {
						font-weight: 700;
						color: #000;
						font-size: 26rpx;
					}
				}
			}

			.post {
				position: absolute;
				top: 0px;
				right: 0px;
				height: 240rpx;
				background-color: #fff;
				width: 70rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.post-name {
					width: 35rpx;
					color: #333;
					font-size: 26rpx;
					text-align: center;
					height: 80rpx;
					padding: 30rpx 0 30rpx;
				}
			}
		}
.content {
	.title {
		position: fixed;
		width: 100%;
		height: 100rpx;
		top: 0;
		left: 0;
		line-height: 100rpx;
		padding: 0 20rpx;
		font-size: 36rpx;
		font-weight: 700;
		letter-spacing: 20rpx;
		z-index: 2;
		color: #fff;
	}

	.container {
		
		
		.goodslist {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 30rpx;
		}
	}
}
.scroll-view_Y {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20rpx;
	.box {
		width: 150rpx;
		height: 210rpx;
		.box-name {
			font-size: 22rpx;
			text-align: center;
			color: #666;
		}
		.box-name-active {
			font-weight: 700;
			color: #000;
			font-size: 26rpx;
		}
	}
	.box1 {
		font-size: 26rpx;
		width: 200rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		border-radius: 35rpx;
		background-color: #f7f7f7;
		// border: 1rpx solid #6e23db;
		margin-bottom: 20rpx;
	}
	.box1-active {
		border-radius: 35rpx;
		color: #ff4544;
		border: 1rpx solid #ff4544;
	}
	.box1-name {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
}
</style>
